/* eslint-disable */
<template>
  <div class="zt-text-row" :class="{ 'is-flex': flex }">
    <div class="label" :style="{ width: labelWidth, textAlign: 'left' }">
      <slot name="label">
        {{ label }}
      </slot>
    </div>
    <div class="text-content">
      <slot>{{ content }}</slot>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  export default {
    name: 'textRow',
    // eslint-disable-next-line
    data () {
      return {}
    },
    props: {
      flex: {
        type: Boolean,
        default: false,
      },
      label: String,
      labelWidth: String,
      content: String,
    },
    methods: {},
    watch: {},
    // eslint-disable-next-line
    created () { },
    // eslint-disable-next-line
    mounted () { },
    // eslint-disable-next-line
    destroyed () { },
    computed: {},
    components: {},
  }
</script>

<style lang="scss" scoped>
.zt-text-row {
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  line-height: 20px;
  padding-bottom: 5px;
  &.is-flex {
    justify-content: space-between;
  }
  .label {
    color: #9c9d9e;
    width: 100px;
    display: inline-block;
  }
  .text-content {
    display: flex;
    align-items: center;
  }
}
</style>
